<template>
    <div class>
       <el-table :data="tableData" border style="width: 100%">
            <el-table-column  align="center" width="30">
              <template slot="header">
               <el-button class="el-icon-circle-plus"
                style="padding:0"
                type="text" @click.prevent="addRow()"></el-button>
              </template>
              <template slot-scope="scope">
                <el-button type="text"
                style="padding:0"
                class="el-icon-remove"
                @click="handleDelete(scope.$index, scope.row)"></el-button>
            </template>
            </el-table-column>
            <el-table-column
              type="index"
              width="50" label="序号">
            </el-table-column>
            <el-table-column label="label名称" align="center" min-width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.fieldLabel" size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="属性名" align="center" min-width="300">
              <template slot-scope="scope">
                <el-input v-model="scope.row.fieldName" size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="表单类型" align="center" min-width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.fieldType" size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="是否启用" align="center" min-width="220">
              <template slot-scope="scope">
                <!-- <el-input v-model="scope.row.fieldStatus" size="mini"></el-input> -->
                <el-switch
                  size="mini"
                  v-model="scope.row.fieldStatus"
                  active-text="启用"
                  inactive-text="禁用"
                  active-value="1"
                  inactive-value="0">
                </el-switch>
              </template>
            </el-table-column>
          </el-table>
    </div>
  </template>
  
  <script>
  export default {
    components: {},
    data() {
      return {
       tableData: []
      };
    },
    computed: {},
    mounted() {
   
    },
    methods: {
      getData(){
        return this.tableData;
      },
      // 增加行
      addRow() {
        var list = {
          fieldType:'text',
          fieldStatus:'1',
        }
        this.tableData.unshift(list)
      },
      handleDelete(index, row) {
         //删除数据库
            if(row.id){
            this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                //删除
                this.$api.formPost( '/api/biz/components/componentProperties/doRmById',{
                    id:row.id
                    }).then(res => {
                        if(res.retHead.code=="0000000"){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.tableData.splice(index, 1);
                        }else{
                            this.$message({
                                type: 'error',
                                message: res.retHead.message
                            });
                        }
                    });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
            }else{
            this.tableData.splice(index, 1);
            }
      },
      initData(registerId){
        let params = {
            registerId:registerId
        };
      this.$api
        .formPost("/api/biz/components/componentProperties/doGetByRegisterId", params)
        .then(res => {
          if (res.retHead.code == "0000000") {
            // console.log(res.retBody);
            this.tableData = res.retBody;
          }else{
            this.$message({
                message: res.retHead.message,
                type: "error"
              });
          }
        });
      },
  
    },
    created() {}
  };
  </script>
  <style lang='scss' scoped>
  
  </style>